<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .bigbox{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .bigbox .left{
            width: 200px;
            height: 100%;
            background-color: #1f2d3d;
            color: white;
            line-height: 60px;
        }
        .bigbox .left ul li{
            box-sizing: border-box;
            padding-left: 20px;
            text-align: center;
        }
        .bigbox .left .z{
            text-align: left;
            background-color: #304156;
        }
        .bigbox .right{
            flex: 1;
        }
        .bigbox .right .top{
            height: 40px;
            border-bottom: 1px solid gray;
            display: flex;
            justify-content: space-between;
        }
        .bigbox .right .top2{
            height: 30px;
            border-bottom: 1px solid black;
            /* overflow: hidden; */
            box-sizing: border-box;
            padding-left: 20px;
        }
        .bigbox .right .top2 button{
            background-color: white;
            margin-right: 20px;
            border: 1px solid gray;
        }
        .bigbox .right .top2 .two{
            width: 100px;
            background-color: #409eff;
            color: white;
        }
        .bigbox .right .sousuo{
            height: 70px;
            box-sizing: border-box;
            padding: 40px 20px;

        }
        .bigbox .right .sousuo input{
            width: 200px;
            height: 40px;
            border: 1px solid gray;
            margin-left: 20px;
        }
        .bigbox .right .sousuo button{
            width: 80px;
            height: 40px;
            margin-left: 20px;
        }
        .bigbox .right .sousuo .sou{
            background-color: #409eff;
            border: none;
            color: white;
            border-radius: 5px;
        }
        .bigbox .right .sousuo .chongzhi{
            background-color: white;
            border: 1px solid gray;
            border-radius: 5px;
        }
        .bigbox .right .buttons{
            height: 50px;
            box-sizing: border-box;
            padding: 30px 20px;
            margin-bottom: 30px;
        }
        .bigbox .right .buttons button{
            width: 80px;
            height: 40px;
            margin-left: 20px;
            
        }
        .bigbox .right .buttons button:nth-child(1){
            background-color: #e8f4ff;
            border: 1px solid #a3d3ff;
            color: #1890ff;
        }
        .bigbox .right .buttons button:nth-child(2){
            background-color: rgb(138, 214, 138);
            border: 1px solid green;
            color: #1890ff;
        }
        .bigbox .right .buttons button:nth-child(3){
            background-color: rgb(240, 88, 88);
            border: 1px solid red;
            color: rgb(248, 165, 165);
        }
        .bigbox .right .buttons button:nth-child(4){
            background-color: yellow;
            border: 1px solid rgb(221, 245, 7);
            color: orange;
        }
        .bigbox .right table{
            width: 100%;
        }
        .bigbox .right .buttom{
            text-align: center;
        }
        .bigbox .right .buttom div{
            width: 500px;
            display: inline;
        }
        .bigbox .right table{
            line-height: 40px;
            text-align: center;
        }
        .bigbox .right table tbody button{
            background-color: #e8f4ff;
            border: 1px solid #a3d3ff;
            color: #1890ff;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="left">
            <ul>
                <li class="z z1">管理系统</li>
                <li class="z">首页</li>
                <li class="z">系统管理</li>
                <li>用户管理</li>
                <li>角色管理</li>
                <li>菜单管理</li>
                <li>部门管理</li>
                <li>岗位管理</li>
                <li>字典管理</li>
                <li>参数设置</li>
                <li>通知公告</li>
                <li>日志管理</li>
                <li class="z">系统监控</li>
            </ul>
        </div>
        <div class="right">
            <div class="top">
                <div class="l"></div>
                <div class="r">
                    <img src="" alt="">
                </div>
            </div>
            <div class="top2">
                <button class="one">首页</button>
                <button class="two">岗位管理</button>
            </div>
            <div class="sousuo">
                <span><b>岗位名称</b></span>
                <input type="text" placeholder="请输入岗位名称">
                <button class="sou">搜索</button>
                <button class="chongzhi">重置</button>
            </div>
            <div class="buttons">
                <button>新增</button>
                <button>修改</button>
                <button>删除</button>
                <button>导出</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>岗位编号</th>
                        <th>岗位编码</th>
                        <th>岗位名称</th>
                        <th>岗位排序</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                        
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <div class="buttom">
                <div>
                <span>共页</span>
                <button>上一页</button>
                <button>下一页</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./axios.min.js"></script>
<script src="./index.js"></script>